<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>熊猫直播_泛娱乐直播平台</title>
    <link rel="icon" href="img/96b553c10eb29f4b79a04b4aaf4c00ce.ico" type="ico"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link rel="stylesheet" href="js/jiaoben4604/dist/pageSwitch.min.css">
</head>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	html,body{
		height: 100%;
	}
	
	.sections,.section {
		height:100%;
	}
	#container,.sections {
		position: relative;
	}
	.section {
		background-color: #000;
		background-size: cover;
		background-position: 50% 50%;
		text-align: center;
		color: white;
	}
	#section0 {
		background-image: url('img/405808f8e15b0dac4e44e2bb85d65548.jpeg');
	}
	#section1 {
		background-image: url('img/a2842dba1226da0861c1270d728cd96f.jpeg');
	}
	#section2 {
		background-image: url('img/b7179caaab1cbdaca443fcb7eaba735c.jpeg');
	}
	#section3 {
		background-image: url('img/d7121d71c733a73e4db21897eacfd75e.jpeg');
	}
	#section4 {
		background-image: url('img/09e6d3e1cacc293c7c4e7fd3889bf3f3.jpeg');
	}
</style>
<body>
	<nav>
		<div style="display: flex;">
			<li class="nav-img"><a href="#"><img src="img/7c36bb2ee9dad01d312b921ed3384f09.png"/></a></li>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="game.html">游戏</a></li>
				<li><a href="disport.html">娱乐</a></li>
			</ul>
			<p class="nav-img1">
					<img src="img/dca826694abbb35261a99bee817365ef.png"/>
			</p>
		</div>
	</nav>	
		<div id="container">
	<div class="sections">
		<div class="section" id="section0"></div>
		<div class="section" id="section1"></div>
		<div class="section" id="section2"></div>
		<div class="section" id="section3"></div>
		<div class="section"id="section4"></div>
	</div>
</div>
	<section class="box" >
		<div class="box-1" style="display: flex;">
			<p class="p"><img src="img/2ae159852ce8569818697512d50efa9c.png"/ class="img1"></p>
			<span>热门</span>
		</div>
		<div class="box1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
	</section>
	<section class="box2" >
		
		<div class="box-2">
			<p class="p"><img src="img/c27cb64f975850d9388d2bd162b06861.png"/ class="img1"></p>
			<span>英雄联盟</span>
			<small>更多></small>
		</div>
		
		
		<div class="box2-1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
		
	</section>
	<section class="box3" >
		
		<div class="box-2">
			<p class="p"><img src="img/91813d38464f6a78b7ca487f1b979da4.png"/ class="img1"></p>
			<span>炉石传说</span>
			<small>更多></small>
		</div>
		
		
		<div class="box2-1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
		
	</section>
	<section class="box4" >
		
		<div class="box-2">
			<p class="p"><img src="img/882a31f5b708c5168033c1dba8cef425.png"/ class="img1"></p>
			<span>主机游戏</span>
			<small>更多></small>
		</div>
		
		
		<div class="box2-1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
		
	</section>
	<section class="box5" >
		
		<div class="box-2">
			<p class="p"><img src="img/725f6a66ee5e9a502318a041194ef7e7.png"/ class="img1"></p>
			<span>DOTA2</span>
			<small>更多></small>
		</div>
		
		
		<div class="box2-1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
		
	</section>
	<section class="box6" >
		
		<div class="box-2">
			<p class="p"><img src="img/e6515557e6696718336b6ae675b6e227.png"/ class="img1"></p>
			<span>熊猫星秀</span>
			<small>更多></small>
		</div>
		
		
		<div class="box2-1" style="display: flex;">
		<div class="box-top">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
		</div>
		<div class="box-bottom">
			<li><a href="#"><img src="img/1.png"/></a></li>
			<li><a href="#"><img src="img/1.png"/></a></li>
			</div>
		</div>
		
	</section>
	
	<footer>
		<div class="footer">
			<img src="img/1b332564a959264bc6f83a3eec5f4355.png" alt="" class="title2"/>
			
			<span class="title">泛娱乐直播平台</span>
			<span class="title1">下载熊猫直播</span>
		</div>
	</footer>
</body>
</html>
<script src="js/jiaoben4604/js/jquery-1.11.0.min.js"></script>
<script src="js/jiaoben4604/dist/pageSwitch.min.js"></script>
<script>
	$("#container").PageSwitch({
		direction:'horizontal',
		easing:'ease-in',
		duration:500,
		autoPlay:true,
		loop:'true'
	});
</script>
<script>
	function calcRem() {
			var http = document.getElementsByTagName("html")[0];
			var w = document.documentElement.clientWidth;
			http.style.fontSize = w / 18 + "px";
		}
		calcRem();
		window.onresize = function() {
			calcRem();
		};
</script>